<!--设置模块唯一ID-->
<div id="rlzy_yuangongjichuxinxi_editor">
<!--标题、面包屑-->
<section class="content-header">
    <h1>
        员工基础信息管理
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li>人力资源</li>
        <li>员工基础信息</li>
        <li class="active">员工基础信息管理</li>
    </ol>
</section>
<!--列表-->
<section class="content">
    <div class="form-horizontal">
        <div class="form-group">
            <div class="col-sm-3 u_userList">
            </div>

            <div class="col-sm-9 u_contextWrap">
                <p style="width: 100%;text-align: center;padding: 150px 0;">点击左侧员工列表进行编辑</p>
            </div>
        </div>
    </div>
</section>

<script type="text/template" data-for="tp_editor">
    <dl>
        <dt>
            <div class="l">
                <i class="fa fa-fw fa-group"></i>人员列表1
            </div>

            <div class="r">
                <button type="button" class="btn btn-default"><i class="fa fa-plus"></i></button>
            </div>
        </dt>
        <dd>
            <input class="form-control searchInput" type="text"/>
        </dd>
        <%for(var i in data){%>
        <dd data-id="<%=data[i].id%>" class="_user">
            <img src="<%=data[i].userImage?data[i].userImage:'./dist/img/avatar_default.jpg'%>"/>
            <div><%=data[i].name%></div>
            <span><%=data[i].title%></span>
        </dd>
        <%}%>
    </dl>
</script>

<script type="text/template" data-for="tp_editor1">
    <form role="form" class="form-horizontal">
        <div class="box-body box-profile">
            <img class="profile-user-img img-responsive img-circle" src="./dist/img/user4-128x128.jpg" alt="User profile picture">
            <h3 class="profile-username text-center">张三</h3>
            <p class="text-muted text-center">技术部-前端开发工程师</p>
        </div>

        <div class="u-box">
            <div class="u-box-header">
                <h3>个人信息</h3>
                <button type="button" class="btn btn-default"><i class="fa fa-edit"></i></button>
            </div>
            <div class="u-area">
                <div class="form-group">
                    <label class="col-sm-2 control-label">性别</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="p3"
                               value="<%=data.p3?data.p3:''%>">
                    </div>

                    <label class="col-sm-2 control-label">年龄</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="p4"
                               value="<%=data.p4?data.p4:''%>">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">出生日期</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="p3"
                               value="<%=data.p3?data.p3:''%>">
                    </div>

                    <label class="col-sm-2 control-label">入职日期</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="p4"
                               value="<%=data.p4?data.p4:''%>">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">政治面貌</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="p3"
                               value="<%=data.p3?data.p3:''%>">
                    </div>

                    <label class="col-sm-2 control-label">户口性质</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="p4"
                               value="<%=data.p4?data.p4:''%>">
                    </div>
                </div>
            </div>
        </div>


        <div class="u-box">
            <div class="u-box-header">
                <h3>合同信息</h3>
                <button type="button" class="btn btn-default"><i class="fa fa-edit"></i></button>
            </div>
            <div class="u-area">
                <div class="form-group">
                    <label class="col-sm-2 control-label">合同类别</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="p3"
                               value="<%=data.p3?data.p3:''%>">
                    </div>

                    <label class="col-sm-2 control-label">人员类别</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="p4"
                               value="<%=data.p4?data.p4:''%>">
                    </div>
                </div>
            </div>
        </div>

        <div class="u-box">
            <div class="u-box-header">
                <h3>婚姻以及家庭信息</h3>
                <button type="button" class="btn btn-default"><i class="fa fa-edit"></i></button>
            </div>
            <div class="u-area">
                <div class="form-group">
                    <label class="col-sm-2 control-label">婚姻状况</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="p3"
                               value="<%=data.p3?data.p3:''%>">
                    </div>

                    <label class="col-sm-2 control-label">子女状况</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="p4"
                               value="<%=data.p4?data.p4:''%>">
                    </div>
                </div>
            </div>
        </div>

        <div class="u-box">
            <div class="u-box-header">
                <h3>紧急联系人</h3>
                <button type="button" class="btn btn-default"><i class="fa fa-edit"></i></button>
            </div>
            <div class="u-area">
                <div class="form-group">
                    <label class="col-sm-2 control-label">紧急联络人</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="p3"
                               value="<%=data.p3?data.p3:''%>">
                    </div>

                    <label class="col-sm-2 control-label">与本人关系</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="p4"
                               value="<%=data.p4?data.p4:''%>">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">紧急联络人</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="p3"
                               value="<%=data.p3?data.p3:''%>">
                    </div>

                    <label class="col-sm-2 control-label">电话</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="p4"
                               value="<%=data.p4?data.p4:''%>">
                    </div>
                </div>
            </div>
        </div>

        <div class="u-box">
            <div class="u-box-header">
                <h3>教育背景</h3>
                <button type="button" class="btn btn-default"><i class="fa fa-edit"></i></button>
            </div>
            <div class="u-area">
                <div class="form-group">
                    <label class="col-sm-2 control-label">毕业院校</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="p3"
                               value="<%=data.p3?data.p3:''%>">
                    </div>

                    <label class="col-sm-2 control-label">所学专业</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="p4"
                               value="<%=data.p4?data.p4:''%>">
                    </div>
                </div>
            </div>
        </div>
    </form>
</script>

<script>
    USEN(function () {
        //模块ID(全系统唯一)
        var id = "#rlzy_yuangongjichuxinxi_editor";

        //定义页面变量
        var $el = $(id);
        var $editor = $el.children('script[data-for=tp_editor]');
        var $editor1 = $el.children('script[data-for=tp_editor1]');

        $el.on('input','.searchInput',function(){
            var val = $.trim($(this).val()).toLowerCase();
            if(val === ''){
                $el.find('dd._user').show();
            }else{
                $el.find('dd._user').show().each(function(){
                    if($(this).text().toLowerCase().search(val) == -1){
                        $(this).hide();
                    }
                })
            }
        });

        $.ajax({
            url:"./simdata/rlzy_users_action.json",
            success:function(data){
                $el.find(".u_userList:first").html(function(){
                    return _.template($editor.html())({
                        data:data
                    })
                });

                $el.on("click",'.u-box-header button',function() {
                    if ($(this).is(".current")) {
                        $(this).removeClass("current").closest('.u-box').find('[name]').attr("disabled", "disabled");
                    }else{
                        $(this).addClass("current").closest('.u-box').find('[name]').removeAttr("disabled");

                    }
                });

                $el.find(".u_userList:first dd._user").on('click',function(){
                    $.ajax({
                        url:"./simdata/common_modify_action.json",
                        data:data,
                        success:function(data1){
                            $el.find(".u_contextWrap:first").html(function(){
                                return _.template($editor1.html())({
                                    data:data1
                                })
                            });

                            $el.find('.u_contextWrap').find('[name]').attr("disabled", "disabled");
                        }
                    })

                });


                $el.find(".u_userList:first dt button").on('click',function(){
                    $.ajax({
                        url:"./simdata/common_add_action.json",
                        success:function(data2){
                            $el.find(".u_contextWrap:first").html(function(){
                                return _.template($editor1.html())({
                                    data:data2
                                })
                            });
                        }
                    })

                })
            }
        })

    });
</script>
</div>